<template>
	<view class="order-list">
		<block v-if="show">
			<view class="order-item" v-for="(item,index) in list" :key="index" @click="goOrderDetails(item.order_id)">
				<view class="order-header">
					<text>{{item.store_name}}</text>
					<text>{{item.status_name}}</text>
				</view>
				<view class="order-list-content">
					<view class="goods-info" v-for="(data,index2) in item.goods_list" :key="index2">
						<image v-if="data.have_group!=1" :src="data.sku_info.img" mode=""></image>
						<image v-if="data.have_group==1" :src="data.image_thumb" mode=""></image>
						<view class="goods-text">
							<view class="goods-name">{{data.goods_name}}</view>
							<view class="goods-price"><text>¥</text>{{data.goods_price}}</view>
							<view class="goods-sku">
								{{ data.have_group!=1 && data.sku_info.color != null ? data.sku_info.color:''}} {{ data.have_group!=1 && data.sku_info.lining != null ? data.sku_info.lining:''}}
								{{data.have_group!=1 && data.sku_info.size != null ? data.sku_info.size:''}} 数量{{data.goods_number}}
							</view>
						</view>
					</view>
					<view class="goods-total"><text>共{{item.goods_list.length}}件 合计：</text><text>¥</text>{{item.order_amount}}</view>
					<view class="line"></view>
					<view class="menu-bottom" v-if="item.pay_status == 2 && item.shipping_status != 0 && parentId == 0 || item.pay_status==3 || item.pay_status == 0  && parentId == 0 || item.order_status==2">
						<view class="btn-view">
							<u-button :ripple="true" @click="createdAgain(item.order_id)" size="medium" :custom-style="customStyle3"
							 throttle-time="1000">再来一单</u-button>
						</view>
						
						<view class="btn-view" v-if="item.order_status==0 && item.pay_status==0 && item.shipping_status==0">
							<u-button :ripple="true" @click="goOrderDetails(item.order_id)" size="medium" :custom-style="customStyle2"
							 throttle-time="1000">立即付款</u-button>
						</view>
						
						<view class="btn-view" v-if="item.order_status==0 && item.pay_status==3 && item.shipping_status==0">
							<u-button :ripple="true" @click="goOrderDetails(item.order_id)" size="medium" :custom-style="customStyle2"
							 throttle-time="1000">支付尾款</u-button>
						</view>

						<view class="btn-view" v-if="item.order_status==0 && item.pay_status==2 && item.shipping_status == 1 ">
							<u-button :ripple="true" @click="affirmOrder(item.order_id,index)" size="medium" :custom-style="customStyle2"
							 throttle-time="1000">确认收货</u-button>
						</view>

						<view class="btn-view" v-if="item.shipping_status == 2 && item.is_after==3">
							<u-button :ripple="true" @click="goOrderDetails(item.order_id)" size="medium" :custom-style="customStyle"
							 throttle-time="1000">申请售后</u-button>
						</view>

						<view class="btn-view">
							<u-button :ripple="true" @click="exportOrder(item.order_id)" size="medium" :custom-style="customStyle"
							 throttle-time="1000">导出订单</u-button>
						</view>
						<view class="btn-view" v-if="item.order_status==0 && item.pay_status==0 && item.shipping_status==0">
							<u-button :ripple="true" @click="cancelOrder(item.order_id,index)" size="medium" throttle-time="1000">取消订单</u-button>
						</view>
						<view class="btn-view" v-if="item.order_status==2">
							<u-button :ripple="true" @click="deleteOrder(item.order_id,index)" size="medium" :custom-style="customStyle"
							 throttle-time="1000">删除订单</u-button>
						</view>
					</view>
					<view class="menu-bottom" v-if="item.order_status==0 && item.shipping_status==0 && item.pay_status==2 && parentId == 0">
						<view class="btn-view">
							<u-button :ripple="true" @click="createdAgain(item.order_id)" size="medium" :custom-style="customStyle3"
							 throttle-time="1000">再来一单</u-button>
						</view>
					</view>
				</view>
			</view>

			<view class="page-box" v-if="list.length == 0">
				<view>
					<view class="centre">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-31/20200831/8209bc26ef8240fd101ca3be46bf63f8.png"
						 mode=""></image>
						<view class="explain">
							您暂时没有订单记录
							<!-- 	<view class="tips">可以去看看有哪些要买的~</view> -->
						</view>
						<view class="btn" @click="goSearch">随便逛逛</view>
					</view>
				</view>
			</view>
		</block>
		<u-loadmore :status="Loadstatus" :icon-type="iconType" :load-text="loadText" v-if="showLoad && list.length > 2" />

	</view>
</template>

<script>
	export default {
		props: {
			showLoad: {
				type: Boolean,
				default: false
			},
			show: {

			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			status: {
				type: String,
				default: 'loadmore'
			},
			parentId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				showNoData: false,
				Loadstatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				customStyle: {
					borderColor: '#000000', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#000000'
				},
				customStyle2: {
					borderColor: '#F59359', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#F59359'
				},
				customStyle3: {
					borderColor: '#333', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333'
				}
			};
		},
		watch: {
			status: {
				handler: function(newVal) {
					this.Loadstatus = newVal
				},
				deep: true
			}
		},
		methods: {
			goOrderDetails(order_id) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/my-order/order-details/order-details?id=' + order_id + '&parent_id=' + this.parentId
				})
			},
			// 导出订单
			exportOrder(order_id) {
				// #ifdef H5
				uni.showLoading({
					title: '正在导出'
				})
				this.$u.api.WxOwnerDataExcel({
					order_id: order_id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '导出成功'
					})
					window.open(res.datas)
				})
				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				let name = new Date().getTime()
				this.$u.api.WxOwnerDataExcel({
					order_id: order_id
				}).then(res => {
					uni.downloadFile({
						url: res.datas,
						// #ifdef MP-WEIXIN
						filePath: wx.env.USER_DATA_PATH + '/' + name + '.xlsx',
						// #endif
						success: (downRes) => {
							// #ifdef MP-WEIXIN
							let filePath = downRes.filePath;
							// #endif
							// #ifdef APP-PLUS
							let filePath = downRes.tempFilePath;
							// #endif
							uni.openDocument({
								filePath: filePath,
								fileType: 'xlsx',
								showMenu: true,
								success: (success) => {
									console.log('打开文档成功', success)
								},
								fail: (fail) => {
									console.log('打开文档失败', fail)
									uni.showToast({
										icon: 'none',
										title: '导出失败，请重试',
									})
								}
							})
						}
					})
				})
				// #endif
			},
			// 取消订单
			cancelOrder(order_id, index) {
				let data = {
					order_id: order_id
				}
				uni.showModal({
					title: '提示',
					content: '确定取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$u.apiWei.OrderCancel(data).then(res => {
								this.$emit('cancel', index)
								//this.$parent.canOrder(index);
								uni.showToast({
									title: res.datas,
									duration: 1000
								});
							})
						} else if (res.cancel) {


						}
					}
				});
			},
			// 删除订单
			deleteOrder(order_id, index) {
				let data = {
					order_id: order_id
				}
				uni.showModal({
					title: '提示',
					content: '确定删除该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$u.apiWei.OrderDelete(data).then(res => {
								this.$emit('delete', index)
								//this.$parent.delOrder(index);
								uni.showToast({
									title: res.datas,
									duration: 1000
								});
							})

						} else if (res.cancel) {


						}
					}
				});
			},
			// 确认收货
			affirmOrder(order_id, index) {
				let data = {
					order_id: order_id
				}
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					success: (res) => {
						if (res.confirm) {
							this.$u.apiWei.OrderAffirm(data).then(res => {
								this.$emit('confirm', index)
								//this.$parent.affOrder(index);
								uni.showToast({
									title: res.datas,
									duration: 1000
								});
							})

						} else if (res.cancel) {


						}
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result'
				})
			},
			createdAgain(order_id){
				uni.showModal({
					title: '温馨提示',
					content: '是否确定再来一单？',
					success: (success) => {
						if(success.confirm){
							this.$u.api.OrderAgain({order_id: order_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '成功加入购物车',
									duration: 1500
								})
								setTimeout(() => {
									uni.switchTab({
										animationDuration: 500,
										url: '/pages/car/car'
									})
								},1500)
							})
						}
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.order-list {
		margin-top: 30rpx;

		.order-item {
			margin-top: 30rpx;
			padding: 30rpx 40rpx;
			width: 100%;
			background: #fff;
			box-sizing: border-box;


			&:first-child {
				margin-top: 0;
			}

			.order-header {
				display: flex;
			}

			.order-header text {
				display: block;
				flex: 1;

			}

			.order-header text:first-child {
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				text-align: left;
			}

			.order-header text:last-child {
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #141414;
				text-align: right;
			}

			.order-list-content {
				margin-top: 80rpx;
			}

			.goods-info {
				margin-top: 20rpx;
				display: flex;
			}

			.goods-info:first-child {
				margin-top: 0;
			}

			.goods-info image {
				display: block;
				width: 176rpx;
				height: 176rpx;
				border-radius: 4rpx;
			}

			.goods-text {
				padding-left: 30rpx;
				flex: 1;
			}

			.goods-name {
				width: 460rpx;
				line-height: 26rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #141414;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.goods-price {
				margin-top: 36rpx;
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
			}

			.goods-price text {
				font-size: 20rpx;
			}

			.goods-sku {
				margin-top: 40rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #757575;
			}

			.goods-total {
				margin-top: 64rpx;
				line-height: 26rpx;
				font-size: 26rpx;
				text-align: right;
				font-weight: bold;
				color: #141414;
			}

			.goods-total text:first-child {
				font-weight: normal;
			}

			.goods-total text:last-child {
				font-size: 18rpx;
			}

			.line {
				margin: 48rpx 0 40rpx 0;
				width: 100%;
				height: 2rpx;
				background: #F5F5F5;
			}

			.menu-bottom {
				display: flex;
				flex-direction: row-reverse;
				box-sizing: border-box;

				.btn-view {
					width: 140rpx;
					margin-right: 28rpx;
				}

				.u-size-medium {
					padding: 0 22rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 24rpx;
				}

				.btn-view:first-child {
					margin-right: 0;
				}
			}

		}

		.centre {
			text-align: center;
			margin: 200rpx auto;
			font-size: 32rpx;

			image {
				width: 316rpx;
				height: 262rpx;
				margin-bottom: 44rpx;
			}

			.explain {
				font-size: 29rpx;
				color: #444444;
			}

			.tips {
				font-size: 24rpx;
				color: #999999;
				margin-top: 20rpx;
			}

			.btn {
				margin: 80rpx auto;
				width: 330rpx;
				line-height: 80rpx;
				border-radius: 8rpx;
				line-height: 64rpx;
				color: #ffffff;
				font-size: 26rpx;
				background: #000000;
			}
		}
	}
</style>
